// Copyright 2018 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License included
// in the file licenses/BSL.txt and at www.mariadb.com/bsl11.
//
// Change Date: 2022-10-01
//
// On the date above, in accordance with the Business Source License, use
// of this software will be governed by the Apache License, Version 2.0,
// included in the file licenses/APL.txt and at
// https://www.apache.org/licenses/LICENSE-2.0

@require "~styl/base/palette.styl"
@require "~styl/base/layout-vars.styl"

.page
  padding-top 0

  &>.section
    padding 18px 24px

  &> div > .section
    padding 18px 24px

.database-summary-title h2
  padding-top 0

.cluster-overview
  .cluster-summary
    background-color white
    padding 24px
    margin-top 0
    margin-left 24px
    margin-right 24px
    border 1px solid $table-border-color

    display grid
    align-items end
    grid-template-columns 6fr 8fr 6fr minmax(auto,8fr) minmax(10px, 2fr) 6fr 6fr 6fr 2fr 6fr 10fr 6fr
    grid-template-rows repeat(3, auto)
    grid-template-areas "cap-t cap-t cap-t cap-t . live-t live-t live-t . rep-t rep-t rep-t" "cap-m cap-c cap-c cap-c . live-a live-b live-c . rep-a rep-b rep-c" "cap-a1 cap-a2 cap-a3 cap-a4 . live-1 live-2 live-3 . rep-1 rep-2 rep-3"

    @media screen and (max-width: 960px)
      padding 18px 14px 10px
      align-items center
      grid-template-columns 4fr 5fr 4fr 3fr 5fr 4fr
      grid-template-rows repeat(4, auto)
      grid-template-areas "cap-t cap-t live-t live-t rep-t rep-t" "cap-m2 cap-m live-1 live-a rep-1 rep-a" "cap-a1 cap-a2 live-2 live-b rep-2 rep-b" "cap-a3 cap-a4 live-3 live-c rep-3 rep-c"

    @media screen and (min-width: 1400px)
      grid-template-columns 2fr 3fr 2fr 3fr 4fr 2fr 2fr 2fr 4fr 2fr 3fr 2fr

    @media screen and (min-width: 1720px)
      grid-template-columns 3fr 4fr 3fr 4fr 8fr 3fr 3fr 3fr 8fr 4fr 4fr 4fr

    .capacity-usage
      &.cluster-summary__title
          grid-area cap-t

      &.cluster-summary__chart
          grid-area cap-c

          @media screen and (max-width: 960px)
            display none

      &.cluster-summary__label.storage-percent
          grid-area cap-m2

          @media screen and (min-width: 960px)
            display none

      &.cluster-summary__metric.storage-percent
          grid-area cap-m

      &.cluster-summary__label.storage-used
          grid-area cap-a1

      &.cluster-summary__metric.storage-used
          grid-area cap-a2

      &.cluster-summary__label.storage-usable
          grid-area cap-a3

      &.cluster-summary__metric.storage-usable
          grid-area cap-a4

    .node-liveness
      &.cluster-summary__title
          grid-area live-t

      &.cluster-summary__metric.live-nodes
          grid-area live-a

      &.cluster-summary__metric.suspect-nodes
          grid-area live-b

      &.cluster-summary__metric.dead-nodes
          grid-area live-c

      &.cluster-summary__label.live-nodes
          grid-area live-1

      &.cluster-summary__label.suspect-nodes
          grid-area live-2

      &.cluster-summary__label.dead-nodes
          grid-area live-3

    .replication-status
      &.cluster-summary__title
          grid-area rep-t

      &.cluster-summary__metric.total-ranges
          grid-area rep-a

      &.cluster-summary__metric.under-replicated-ranges
          grid-area rep-b

      &.cluster-summary__metric.unavailable-ranges
          grid-area rep-c

      &.cluster-summary__label.total-ranges
          grid-area rep-1

      &.cluster-summary__label.under-replicated-ranges
          grid-area rep-2

      &.cluster-summary__label.unavailable-ranges
          grid-area rep-3

    &__title
      font-weight bold
      font-size 20px
      margin-bottom 20px

      @media screen and (max-width: 960px)
        margin-bottom 10px
        font-size 14px
        line-height 14px

      @media screen and (min-width: 960px) and (max-width: 1400px)
        font-size 18px

    &__metric
      font-size 30px
      font-weight bold
      color $link-color
      white-space nowrap
      padding-right 12px

      @media screen and (max-width: 960px)
        font-size 22px

      @media screen and (min-width: 960px) and (max-width: 1400px)
        font-size 28px
        line-height 54px

      @media screen and (min-width: 1400px)
        line-height 64px

      @media screen and (min-width: 1720px)
        font-size 36px

      &.warning
        color $warning-color

      &.alert
        color $alert-color

      &.storage-used, &.storage-usable
        @media screen and (min-width: 960px) and (max-width: 1400px)
          font-size 14px
          line-height 16px

        @media screen and (min-width: 1400px) and (max-width: 1720px)
          font-size 18px
          line-height 20px

        @media screen and (min-width: 1720px)
          font-size 22px
          line-height 24px

    &__label
      font-size 12px
      font-weight 500
      line-height 18px
      text-transform uppercase
      color $tooltip-color
      letter-spacing 2px

      @media screen and (max-width: 960px)
        margin-top 5px
        margin-bottom 5px

      @media screen and (max-width: 1400px)
        font-size 10px
        line-height 14px

      @media screen and (min-width: 960px)
        padding-top 10px

  .capacity-usage.cluster-summary__chart
    align-self start
    position relative

    svg
      position absolute
      shape-rendering crispEdges
      margin-left -20px
      margin-top 8px

      @media screen and (max-width: 1400px)
        margin-top 4px

    .axis path
      fill none
      stroke none

    .axis line
      fill none
      stroke #7382a2
      shape-rendering crispEdges

    .axis text
      font-size 12px
      fill #7382a2

    .axis .tick:nth-child(2n) text
      display none

    rect
      shape-rendering crispEdges

      &.bg-normal
        fill #e2e5ee

      &.bg-low-disk-space
        fill #cfd2dc

      &.bar
        fill $link-color
